<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/Three.js"></script>
</head>
<body>

</body>
<script>
    // 场景
    var scene = new THREE.Scene();
    // 相机
    // 75度视角  PerspectiveCamera（远景相机） 长宽比（一般都宽除以高）近裁剪面（相机能看见的最近距离） 远裁剪面（相机能看见的最远距离）
    // 相机的可见范围是一个削平的金字塔（视椎体）
    var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
    // 渲染器
    var renderer = new THREE.WebGLRenderer();
    //  渲染空间的尺寸（一般屏幕）
    renderer.setSize( window.innerWidth, window.innerHeight );
    document.body.appendChild( renderer.domElement );


    // 演员（模型）
    // 立方体
    // var geometry = new THREE.BoxGeometry( 1, 1, 1 );
    var geometry = new THREE.TorusGeometry( 3, 1, 3, 8, Math.PI / 4 * 2 );
    // 材料，着色
    var material = new THREE.MeshBasicMaterial( {
        color: '#fedcbd'
    } );
    // 网孔 ： 将材料应用到模型上，添加到场景完成动画
    var cube = new THREE.Mesh( geometry, material );
    scene.add( cube );

    // 对象将被添加到原点处，即坐标点(0,0,0)，这将导致相机和立方体发生空间重叠。为了避免这样，我们把相机（camera）的位置移出来一些
    // 相对于屏幕往内的方向
    camera.position.z = 10;

    // 渲染循环
    var render = function () {
        requestAnimationFrame( render );

        // 动画
        // translations 平移
        // rotations 旋转
        // scaling 缩放
        // cube.rotation.x += 0.1;
        // cube.rotation.y += 0.1;

        renderer.render(scene, camera);
    };

    render();
</script>
</html>